<template>
  <div class="card-component">
    <div class="card-content">
      <div class="card-content-title">基础信息</div>
      <Buttons @buttons="getButtonsParams" />
    </div>
    <Table
      :tableData="table.data"
      :loading="table.loading"
      :listData="listData"
      @table="getTableParams"
    />
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      destroy-on-close
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="520px"
    >
      <component
        :is="componentTag"
        @operationDone="operationDone"
        :operationId="operationId"
        :listData="listData"
      >
      </component
    ></el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef, defineProps } from "vue";
import Buttons from "./device-buttons.vue";
import Table from "./device-table.vue";
import entryAdd from "./entry-add.vue";
import entryEdit from "./entry-edit.vue";
import passAdd from "./pass-add.vue";
import passEdit from "./pass-edit.vue";
import deviceAdd from "./device-add.vue";
import deviceEdit from "./device-edit.vue";
import { getDeviceTree } from "../request.js";
import { getDictionary } from "@/service/modules/publicModule";
import { useRoute } from "vue-router";
const route = useRoute();

const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {},
  },
});

// 弹窗
const title = ref("");
const dialogVisible = ref(false);
const componentTag = shallowRef("");
const operationId = ref("");
const operationDone = (r) => {
  dialogVisible.value = false;
  operationId.value = "";
  if (!r) {
    getData();
  }
};

const handleClose = () => {
  dialogVisible.value = false;
};

// buttons按钮
const getButtonsParams = (value) => {
  console.log(value);
  
  if (value == "entry-add") {
    title.value = "新增岗亭信息";
    componentTag.value = entryAdd;
  }
  operationId.value = props.orderDetails.name;
  dialogVisible.value = true;
};

// table操作
const getTableParams = (value) => {
  console.log("value ===>", value);
  if (value.operation == "entry-edit") {
    title.value = "编辑岗亭信息";
    componentTag.value = entryEdit;
  } else if (value.operation == "pass-add") {
    title.value = "新增通道信息";
    componentTag.value = passAdd;
  } else if (value.operation == "pass-edit") {
    title.value = "编辑通道信息";
    componentTag.value = passEdit;
  } else if (value.operation == "device-add") {
    title.value = "新增设备信息";
    componentTag.value = deviceAdd;
  } else if (value.operation == "device-edit") {
    title.value = "编辑设备信息";
    componentTag.value = deviceEdit;
  }
  operationId.value = value;
  dialogVisible.value = true;
};

// 表格
const table = reactive({
  data: [],
  loading: true,
});

const getData = async () => {
  table.loading = true;
  await getDeviceTree(route.query.id).then((res) => {
    if (res.data.code === 0) {
      table.data = res.data.result;
      table.loading = false;
    }
  });
};

const listData = reactive({
  typeList: [],
  dutyModeList: [],
  positionList: [],
  directionList: [],
});

const init = async () => {
  // 出入类型
  await getDictionary("cpark_sentry_type").then((res) => {
    listData.typeList = res.data.result;
  });
  // 值守模式
  await getDictionary("cpark_duty_mode").then((res) => {
    listData.dutyModeList = res.data.result;
  });
  // 位置
  await getDictionary("cpark_pass_position").then((res) => {
    listData.positionList = res.data.result;
  });
  // 通道方向
  await getDictionary("cpark_pass_direct").then((res) => {
    listData.directionList = res.data.result;
  });
};

getData();
init();
</script>

<style lang="less" scoped>
.card-component {
  .card-content {
    margin-bottom: 37px;
    display: flex;
    align-items: center;
  }
  .card-content-title {
    font-weight: 600;
    font-size: 26px;
    color: #333333;
    margin-right: 12px;
  }
}
</style>
